<template>
	<view>
		<view class="topImage">
			公告列表
		</view>
		<view class="list">
			<u-tabs :list="tabList" active-color="#F2615F" inactive-color="#000" :is-scroll="false" :current="current"
				@change="change"></u-tabs>

			<view class="listItem flex" v-for="(item,index) in list" :key="index" @click="onListItem(item)">
				<view class="listItem_left flex-center" :style="{color : rankingColor[index]}">
					<text v-if="index < 9">0</text> {{ index + 1 }}
				</view>
				<view class="listItem_right">
					<view class="listItemT flex-between">
						<view class="title">
							{{item.title}}
						</view>
						<view class="time">
							{{item.createdAt}}
						</view>
					</view>
					<view class="listItemB">
						{{item.introduction}}
					</view>
				</view>

			</view>
			<u-loadmore :status="status" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lastId: 0,
				page: 1,
				list: [],
				rankingColor: [
					'#F46047',
					'#F38C45',
					'#FFAB33'
				],
				end: false,
				status: 'loadmore',
				tabList: [{
					name: '通知'
				}, {
					name: '公告'
				}],
				current: 0
			}
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			this.getList()
		},
		methods: {
			change(index) {
				this.current = index;
				this.lastId = 0;
				this.page = 1;
				this.end = false;
				this.status = "loadmore";
				this.list = [];
				this.getList();
			},
			onListItem(param) {
				uni.navigateTo({
					url: `/home/noticeDetails?id=${param.id}`
				})
			},
			getList() {
				if (this.end) {
					return
				}
				this.$post({
					module: 'Content',
					interface: 3000,
					data: {
						lastId: this.lastId,
						page: this.page,
						type: this.current == 0?2:0
					}
				}).then(res => {
					// console.log(res);
					this.list = [...this.list, ...res.list]
					if (res.list.length < 10) {
						this.end = true
					}
					if (res.list.length < 10) {
						this.status = 'nomore';
					} else {
						this.status = 'loading';
					}
					this.page++
					this.lastId = res.lastId
				})
			}

		},
	}
</script>

<style scoped lang="scss">
	.topImage {
		width: 100%;
		height: 332rpx;
		background-image: url('http://www.bobei.shop/static/third/gonggao.png');
		background-size: cover;
		padding: 100rpx 52rpx 0;
		font-size: 60rpx;
		font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
		font-weight: 400;
		color: #FFFFFF;
	}

	.list {
		margin-top: -50rpx;
		background-color: #FFFFFF;
		padding: 0 15rpx;
		border-radius: 24rpx 24rpx 0rpx 0rpx;

		.listItem {
			margin-top: 48rpx;

			.listItem_left {
				width: 15%;
				font-size: 40rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 600;
				color: #000000;
				line-height: 46rpx;
			}

			.listItem_right {
				width: 85%;

				.listItemT {
					.title {
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 600;
						color: #000000;
						line-height: 32rpx;
					}

					.time {
						width: 40%;
						font-size: 20rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}
				}
			}

			.listItemB {
				margin-top: 10rpx;
				font-size: 20rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}

		}
	}
</style>
